<template>
  <view class="service-container">
    <!-- 主要内容区域 -->
    <view class="content">
		<view class="header">
      <CustomNavBar 
        title="客服中心"
        backType="redirect"
        redirectUrl="/pages/me/me"
      />
          <view class="parking-card">
          <view class="card-header">
            <text class="card-title">选择停车场</text>
          </view>
          <view class="parking-item" @click="selectParking">
            <text class="parking-name">{{ parkingName }}</text>
            <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
        </view>
		</view>
      <!-- 选择停车场卡片容器 -->
      <!-- <view class="parking-card-container"></view> -->
        
      
    </view>

    <!-- 底部呼叫客服按钮 -->
    <view class="bottom-section">
      <button class="call-service-btn" @click="callService">
        呼叫客服
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import CustomNavBar from '@/components/CustomNavBar.vue'

// 方法
const goBack = () => {
  uni.navigateBack()
}

// 停车场名称（默认静态值，假设为通过接口获取的结果）
const parkingName = ref('上元会展地面停车场')

// 占位：通过接口获取停车场名称（请替换为真实接口调用）
const fetchParkingFromApi = async () => {
  // TODO: 调用实际接口获取停车场数据，例如：
  // const res = await MyApi.getDefaultParking()
  // parkingName.value = res?.data?.name || parkingName.value
  // 目前使用静态结果占位
  parkingName.value = '上元会展地面停车场'
}

onLoad(() => {
  fetchParkingFromApi()
})

const selectParking = () => {
  uni.navigateTo({
    url: '/pages/service/search'
  })
}

const callService = () => {
    uni.showModal({
    title: '呼叫客服',
    content: '客服热线：400-123-4567\n工作时间：9:00-18:00',
    showCancel: true,
    confirmText: '呼叫',
    success: (res) => {
      if (res.confirm) {
        uni.makePhoneCall({
          phoneNumber: '10086'
        })
      }
    }
  })
  // 拨打客服电话：10086
  // uni.makePhoneCall({
  //   phoneNumber: '10086'
  // })
}
</script>

<style scoped>
.service-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏 */
.header {
 background: linear-gradient(to bottom, #fff, rgb(221, 247, 243));
 /* padding: 8rpx; */
 height: 350rpx;
 width: 100%;
 z-index: 0;
 position: relative;
 box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 32rpx;
  position: relative;
}

.nav-left {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.record-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  border-radius: 50%;
}

/* 主要内容区域 */
.content {
  flex: 1;
  position: relative;
  /* padding: 40rpx 32rpx; */
  background-color: #fff;
}



/* 停车场选择卡片 */
.parking-card {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 40rpx 32rpx;
  width: 83%;
  height: 150rpx;
  border: 2rpx solid #00D4AA;
  position: relative;
  z-index: 1;
  top:25%;
  left:4%;
}

.card-header {
  margin-bottom: 32rpx;
}

.card-title {
  font-size: 25rpx;
  color: #666;
  font-weight: 500;
}

.parking-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 0;
}

.parking-name {
  font-size: 31rpx;
  color: black;
  font-weight: 540;
  letter-spacing: 2rpx;
  flex: 1;
}

/* 底部按钮区域 */
.bottom-section {
  padding: 40rpx 32rpx;
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
  background-color: #fff;
}

.call-service-btn {
  width: 98%;
  height: 96rpx;
  background: linear-gradient(135deg, #1cccb4 0%, #1cccb4 100%);
  border-radius: 48rpx;
  border: none;
  font-size: 32rpx;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(0, 212, 170, 0.3);
  transition: all 0.3s ease;
}

.call-service-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 12rpx rgba(0, 212, 170, 0.3);
}

.call-service-btn::after {
  border: none;
}
</style>